<template>
	<view>

		<view class="user_classify bg-white padding rowsa align-center solid-bottom">
			<view v-for="(item,index) in classifyList" :key='index' @click="activeClassifyIndex=index">
				<view class="classify_title" :class="{classify_active_title:index==activeClassifyIndex}">{{item.title}}
				</view>
				<view class="active_heng" :class="{active_heng2:index==activeClassifyIndex}"></view>
			</view>
		</view>
		<view v-if="activeClassifyIndex ==0">
			<view class="padding-sm rowsb bg-white">
				<text>最近联系</text>
				<text class="cuIcon-unfold"></text>
			</view>
			<view class="align-center padding solid-bottom bg-white" v-for="(item,index) in 3" :key="index"
				@click="$tools.push(item.toUrl)">
				<view>
					<image src="item.image" mode="" class="message_icon"></image>
				</view>
				<view class="margin-left-xs">
					<view class="align-center ">
						<view class="message_title">标题</view>
						<view class="message_corner margin-left-sm">
							0
						</view>
					</view>
					<view class="message_content">我是内容我是内容</view>
				</view>
			</view>
		</view>
		<view class="rowsc" v-if="activeClassifyIndex ==1">
			<view class="share_bg rowsc">
				<image src="" mode="" class="bg-gray image"></image>
				<view class="title">
					扫一扫添加
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMarker
	} from '@/common/path.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				messageList: [],
				userInfo: getApp().globalData.userInfo,
				//分类
				classifyList: [{
						title: '好友列表',
						id: 1
					},
					{
						title: '分享海报',
						id: 2
					},
				],
				activeClassifyIndex: 0

			}
		},

		onShow() {
			getApp().getSignPackage('消息中心')
			uni.setNavigationBarTitle({ //设置标题
				title: '消息中心'
			})

			this.getMarker()
		},
		methods: {
			/**
			 * 消息角标
			 */
			getMarker() {
				this.$axios.axiosFrom("POST", getMarker, {})
					.then((res) => {
						if (res.code == 1) {
							let messageList = [{
									toUrl: '/pages/message/detail?title=系统消息' + '&id=' + 1 + '&image=' +
										'/static/message/icon_xitongtz.png',
									image: '/static/message/icon_xitongtz.png',
									title: '系统消息',
									content: '在此查看系统消息！',
									id: 1,
									count: 0,
								},
								// {
								// 	toUrl: '/pages/message/detail?title=消息推送' + '&id=' + 2 + '&image=' + '/static/message/icon_xiaoxtuis.png',
								// 	image: '/static/message/icon_xiaoxtuis.png',
								// 	title: '消息推送',
								// 	content: '这是一条!  一条通知的推送消息它很长推送消息！',
								// 	id: 2
								// },
								{
									toUrl: '/pages/message/detail?title=问答消息' + '&id=' + 3 + '&image=' +
										'/static/message/icon_wendaxx.png',
									image: '/static/message/icon_wendaxx.png',
									title: '问答消息',
									content: '在此查看问答消息！',
									id: 3,
									count: 0,
								},
								{
									toUrl: '/pages/message/detail?title=评论消息' + '&id=' + 4 + '&image=' +
										'/static/message/icon_pinglunxx.png',
									image: '/static/message/icon_pinglunxx.png',
									title: '评论消息',
									content: '在此查看评论消息！',
									id: 4,
									count: 0,
								},
								{
									toUrl: '/pages/message/detail?title=收益消息' + '&id=' + 5 + '&image=' +
										'/static/message/icon_shouyxx.png',
									image: '/static/message/icon_shouyxx.png',
									title: '收益消息',
									content: '您有一条新的收益消息！',
									count: 0,
									id: 5
								},
							]
							let array = [res.data.notice, res.data.order, res.data.comment, res.data.money_log]
							messageList[0].count = array[0]
							messageList[1].count = array[1]
							messageList[2].count = array[2]
							messageList[3].count = array[3]
							this.messageList = messageList
							console.log('[消息角标]', messageList);
							console.log('[array]', array);
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F2EFEF;
	}

	.user_classify {
		padding: 30rpx;
		display: flex;


		.classify_title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #9AA2B5;
			opacity: 1;
		}

		.classify_active_title {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 12px;
			color: #FF6B2B;
			opacity: 1;
		}

		.active_heng {
			margin: 0 auto;
			width: 78rpx;
			height: 14rpx;
			opacity: 0.3;
			border-radius: 7rpx;
			margin-top: 10rpx;
			background-color: #F5F6F8;

		}

		.active_heng2 {
			background: #FF6B2B !important;
		}

	}

	.message_icon {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #EEEEEE;
	}

	.message_title {
		font-size: 32rpx;
		font-weight: bold;
		color: #06121E;
	}

	.message_content {
		font-size: 24rpx;
		font-weight: 500;
		color: #8C9198;
		align-items: center;
		display: flex;
	}

	.message_corner {
		width: 46rpx;
		height: 32rpx;
		background: #FF4723;
		border-radius: 99rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 22rpx;
	}
	
	.share_bg {
		margin-top: 140rpx;
		width: 610rpx;
		height: 784rpx;
		background-image: url(../../static/icon/icon_a.png);
		background-size: 100% 100%;
		position: relative;
	}
	
	.image {
		height: 500rpx;
		width: 500rpx;
		margin-top: 50rpx;
	}
	
	.title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #5B5E63;
		opacity: 1;
		position: absolute;
		bottom: 100rpx;
		left: 0;
		right: 0;
		text-align: center;
	}
</style>
